<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text" class="user"> <br>
    <input type="text" class="pwd"> <br>
    <button>登陆</button>

    <script>

        // 用户名是唯一的
        //   用户名作为名称   密码作为内容
        document.cookie = 'yy=123;path=/;expires=' + new Date();
        document.cookie = 'cc=456;path=/;expires=' + new Date();



        const oUser = document.querySelector('.user');
        const oPwd = document.querySelector('.pwd');
        const oBtn = document.querySelector('button');


        oBtn.onclick = function () {
            const username = oUser.value;
            const userpwd = oPwd.value;

            // 验证 ...



            // 登陆
            //    ok
            //    用户名错误
            //    密码错误

            const cookies = document.cookie;
            let arr = cookies.split('; ');
            arr = arr.map(v => {
                const arr2 = v.split('=');
                const obj = {};
                obj.name = arr2[0];
                obj.content = arr2[1];
                return obj;
            })
            console.log(arr);



            // 找到用户名
            const res = arr.filter(v => v.name === username)[0];
            console.log(res);
            if (res) {
                // 找密码
                if (res.content === userpwd) {
                    alert('登陆成功');
                    // 记录是谁在登录!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                    document.cookie = `who=${username};path=/;expires=${new Date()}`;
                    location.href = './09index.html';
                } else {
                    alert('密码错误')
                }
            } else {
                alert('用户名不存在');
            }

        }

    </script>

</body>

</html>